import React from 'react';
import { Form, Input, Button, message } from 'antd';
import { UserOutlined, LockOutlined, MailOutlined, PhoneOutlined, LeftOutlined } from '@ant-design/icons';
import './Login.css';
import type { ViewType } from './LoginLayout';
import DynamicForm, { type FormConfig } from '../DynamicForm';
// import { useNavigate } from 'react-router-dom';

const RegisterForm: React.FC<{ onBack: (type: ViewType) => void; registerType: string; formConfig: FormConfig }> = ({ onBack, registerType, formConfig }) => {
  // const navigate = useNavigate();
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    console.log(`Register ${registerType} form values:`, { ...values, registerType });
    message.success('注册成功，请登录');
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
    message.error('注册失败，请检查输入');
  };
  // const goBackToLogin = () => {
  //   onBack('');
  // };

  return (
    <>
    <div className="login-container">
      {/* 右侧注册区域 */}
      <div className="login-right">
        <div className="login-header">
          <h1 className="login-title">填写注册信息</h1>
          {/* <p className="login-welcome">{registerType === 'user' ? '创建个人账号，管理研究档案、订阅领域动态' : '创建课题组，统一管理实验数据、分配仪器权限'}</p> */}
        </div>
        <div className="login-content">
            <DynamicForm {...formConfig} />
        </div>
        {/* 登录链接 */}
        <div className="register-link-container">
          <div style={{ cursor: 'pointer' }} onClick={() => onBack('registertype')}>
            <LeftOutlined />返回
          </div>
          <div>
            已有账户？
            <span onClick={() => onBack('login')} className="register-text">
              立即登录
            </span>
          </div>
        </div>
      </div>
    </div>
    </>
  );
};

export default RegisterForm;